<template>
 <ul class="sub-categories">
    <li
      v-for="cate in subcategories"
      :key="cate.id"
      is="router-link"
      :to="{name: 'list', params: {url: cate.url}}"
      tag="li"
    >
      <img :src="cate.imageUrl" />
      <span>{{ cate.title }}</span>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'SubCategories',
  data() {
    return {
      subcategories: []
    }
  },

  // created () {
  //   console.log('ly', this.$route)
  //   this.$http.getSubcategories(this.$route.params.hello)
  //     .then(resData => {
  //       console.log(resData)
  //       this.subcategories = resData.categories
  //     })
  // },
  // 这里粗发跨域
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.$http.getSubcategories(to.params.helleo)
        .then(resData => {
          vm.subcategories = resData.categories
        })
    })
  },
  beforeRouteUpdate(to, from, next) {
    this.$http.getSubcategories(to.params.helleo)
      .then(resData => {
        this.subcategories = resData.categories
      })
    next()
  },
  beforeRouteLeave(to, from, next) {
    next()
  }
}
</script>

<style lang="scss" scoped>
.sub-categories {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  li {
    width: 48%;
    background: cornsilk;
    margin-bottom: 10px;
  }
}
</style>
